import React, { useEffect, useState } from 'react';
import '@/views/Index/TestsEdit/TestsEdit.scss'
import { useNavigate, } from "react-router-dom";
import Nav from '../../../components/Nav/Nav'
import service from '../../../api/index'
import { Form, Input, Button, Cascader, Radio } from 'antd';
import getDate from "../../../utils/getDate";
import { useSelector } from 'react-redux';

interface Props {

}

function TestsEdit(props: Props) {

    let [form] = Form.useForm()

    let id = useSelector((state: any) => state.test_id)
    
    useEffect(() => {
        editData({ id: id })
    }, [])
    // 数据回显
    let editData = async (payload = {}) => {
        console.log(1,id);

        let res = await service.dy.tests_search(payload)
        console.log(res.data[0]);
        // 回显表单内容
        form.setFieldsValue(
            {
                category: res.data[0].category,
                name: res.data[0].name,
            }
        );
    }

    let navigator = useNavigate()
    let questions = useSelector((state: any) => state.questions)
    let [boxlist, setBoxList] = useState<any>([])

    // 总数量
    let [total, setTotal] = useState()

    useEffect(() => {
        question(questions[0])
    }, [])

    let question = async (ids: any) => {
        // console.log(ids);

        let res = await service.dy.questions_search({ id: ids })
        // console.log(res.data);
        setBoxList(res.data)
        setTotal(res.data.length)
    }

    let questionAdd = () => {
        navigator('/index/questions')
    }

    let onFinish = async (values: any) => {
        values = {id:id, count: 1, score: 5, edittime: getDate(), ...values }
        console.log(values);
        let res = await service.dy.tests_update(values)
        navigator('/index/tests')
    }

    

    return (
        <div className='testsedit'>
            <Nav />
            <div className="list">
                <div className="question_message">
                    <div className="title">
                        题目信息
                    </div>
                    <Form
                        className='form'
                        form={form}
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 14 }}
                        layout="horizontal"
                        onFinish={onFinish}
                    >
                        <Form.Item label="试卷名称" name="name" rules={[{ required: true }]}>
                            <Input placeholder='请输入' />
                        </Form.Item>
                        <Form.Item label="试卷分类" name="category" rules={[{ required: true }]}>
                            <Cascader placeholder="请选择试卷类目"
                                options={[
                                    {
                                        value: '一级分类A',
                                        label: '一级分类A',
                                        children: [
                                            {
                                                value: '二级分类A', label: '二级分类A', children: [
                                                    { value: '三级分类A', label: '三级分类A' },
                                                    { value: '三级分类B', label: '三级分类B' },
                                                ]
                                            },
                                            {
                                                value: '二级分类B', label: '二级分类B', children: [
                                                    { value: '三级分类A', label: '三级分类A' },
                                                    { value: '三级分类B', label: '三级分类B' },
                                                ]
                                            },
                                        ],
                                    },
                                    {
                                        value: '一级分类B',
                                        label: '一级分类B',
                                        children: [
                                            {
                                                value: '二级分类A', label: '二级分类A', children: [
                                                    { value: '三级分类A', label: '三级分类A' },
                                                    { value: '三级分类B', label: '三级分类B' },
                                                ]
                                            },
                                            {
                                                value: '二级分类B', label: '二级分类B', children: [
                                                    { value: '三级分类A', label: '三级分类A' },
                                                    { value: '三级分类B', label: '三级分类B' },
                                                ]
                                            },
                                        ],
                                    },

                                ]}
                            />
                        </Form.Item>
                        <a href="#" style={{ marginLeft: '130px' }}>新建分类</a>
                        <Form.Item>
                            <Button className='submit' type="primary" onClick={questionAdd}>
                                + 添加题目
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            {
                                boxlist.length != '' &&
                                <div className="box">
                                    <div className="message">
                                        <div className="question_name">
                                            {boxlist[0].id + '. ' + boxlist[0].question}
                                        </div>
                                        <div className="option">
                                            {'A' + ' . ' + boxlist[0].A}
                                        </div>
                                        <div className="option">
                                            {'B' + ' . ' + boxlist[0].B}
                                        </div>
                                        <div className="option">
                                            {'C' + ' . ' + boxlist[0].C}
                                        </div>
                                        <div className="option">
                                            {'D' + ' . ' + boxlist[0].D}
                                        </div>
                                    </div>
                                    <div className="make">
                                        <div className="score">
                                            分值：<Input type="text" value="5" />
                                        </div>
                                        <div className="tag">
                                            <a href="#">上移</a>
                                            <a href="#">编辑</a>
                                            <a href="#">删除</a>
                                        </div>
                                    </div>
                                </div>
                            }
                        </Form.Item>

                        <div className="total" style={{ marginLeft: '60px' }}>
                            {'单选题 ' + total + '题, ' + '共' + '5' + '分'}
                        </div>

                        <Form.Item>
                            <Button className='submit' type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="more">
                    <div className="title">
                        更多信息
                    </div>
                </div>
            </div>

        </div>
    );
}

export default TestsEdit;